<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 300px; overflow-y: hidden" v-model="internalHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" @onChange="onChange" />
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
    components: { Editor, Toolbar },
    props: {
        descs: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            editor: null,
            internalHtml: '', // 子组件自己管理的html值
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor);
        },
        onChange() {
            this.$emit('sendHtmlStr', this.internalHtml); // 发送子组件自己管理的html值
        },
        clearEditorHtml() {
            this.internalHtml = ''; // 清空编辑器内容
        },
    },
    watch: {
        descs(newVal) {
            this.internalHtml = newVal; // 监听父组件props的变化，更新子组件的内部变量
        }
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor) {
            editor.destroy(); // 组件销毁时，及时销毁编辑器
        }
    },
    mounted(){
        this.$nextTick(()=>{
        })
        
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
